<template>
    <div class="tree-container">
        <div class="container-header">
            <i class="el-icon-search"></i>
            <el-input v-model="tree_val" placeholder="请输入"></el-input>
        </div>
        <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
            <div class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <div class="tree-node_ctrls" @click="showAddModal">
                    <i class="iconfont tianjia"></i>
                </div>
            </div>
        </el-tree>
    </div>
</template>

<script>
    export default {
        name: 'treeDept',
        data() {
            return {
                tree_val: '',
                data: [{
                    id: 1,
                    label: '御景峯园区',
                    children: [{
                        id: 4,
                        label: '御景峯大厦',
                        children: [{
                            id: 9,
                            label: '1602'
                        }, {
                            id: 10,
                            label: '1604'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2',
                        children: [{
                            id: 11,
                            label: '三级 3-2-1'
                        }, {
                            id: 12,
                            label: '三级 3-2-2'
                        }, {
                            id: 13,
                            label: '三级 3-2-3'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        mounted() {

        },
        methods: {
            showAddModal() {
                this.$parent.onAdd()
            }
        },
    };
</script>

<style scoped lang="less">
    .tree-container {
        width: 100%;
        height: 100%;

        .container-header {
            height: 65px;
            position: relative;
            display: flex;
            align-items: center;
            padding: 0px 10px;
            border-bottom: 1px solid @primaryBorderColor;

            .el-icon-search {
                position: absolute;
                color: @primaryBorderColor;
                font-size: 20px;
                z-index: 2;
                left: 9%;
            }
        }
    }

    .custom-tree-node {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tree-node_ctrls {
            width: 30%;
            text-align: right;
            padding-right: 10px;

            // display: flex;
            // justify-content: flex-end;
            .tianjia {
                &:hover {
                    color: #409eff;
                }
            }
        }
    }

    ::v-deep .el-input {
        display: flex;
        justify-content: center;
    }

    ::v-deep .el-input__inner {
        background: @primaryHeaderBgcolor  !important;
        border: 1px solid @primaryBorderColor;
        width: 100%;
        border-radius: 30px;
        padding: 0 15px 0 42px;
        height: 36px;
        line-height: 36px;
    }

    ::v-deep .el-tree {
        height: calc(100% - 66px);
        background: @primaryHeaderBgcolor;
        border-radius: 0 0 0 6px;
        box-sizing: border-box;
        padding: 12px 10px;
        color: @primaryThemeTxtColor;
    }


    ::v-deep .el-tree-node__content:hover {
        background: @paginationBgcolor  !important;
        border-radius: 4px;
    }

    ::v-deep .el-tree-node.is-current>.el-tree-node__content {
        background-color: #7367f0 !important;
        border-radius: 4px;
    }

    ::v-deep .is-current>.el-tree-node__content>.el-tree-node__label {
        color: #f0f0f0;
    }
</style>